<template>
  <view class="user_form_login">
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      :font-size="28"
      @change="change"
      inactive-color="#787878"
      active-color="#0049AC"
    ></u-tabs>
    <view v-if="current === 0" class="input_login_box">
      <view class="input_login" style="margin-top: 0rpx">
        <image class="input_icon" src="@/static/iconImg/user_name.png"></image>
        <u-input
          clearable
          :placeholder="$t('locales.pleaseEnterNumber')"
          :maxlength="100"
          class="input_block"
          v-model="form.username"
        />
      </view>
      <view class="input_login">
        <image class="input_icon" src="@/static/iconImg/password.png"></image>
        <u-input
          clearable
          :placeholder="$t('locales.pleaseEnterPassword')"
          :maxlength="30"
          class="input_block"
          v-model="form.password"
          type="password"
        />
      </view>
    </view>
    <view v-else class="input_login_box">
      <view class="input_login" style="margin-top: 0rpx">
        <image class="input_icon" src="@/static/iconImg/mobile.png"></image>
        <view class="input_sex">
          <u-input
            :border="false"
            type="select"
            placeholder="请输入归属地"
            :select-open="showCountry"
            v-model="mobileAtt"
            @click="getPlace"
          ></u-input>
        </view>

        <u-input
          type="number"
          clearable
          :placeholder="$t('locales.pleaseEnterPhoneNumber')"
          :maxlength="11"
          class="input_block"
          v-model="form.username"
        /><!--          @blur="
            $store.dispatch('CheckRegisterIn', {
              username: form.username,
              accountType: 2,
              pageType: 2
            })
          "-->
      </view>
      <view class="input_login">
        <image
          class="input_icon"
          src="@/static/iconImg/verification_code.png"
        ></image>
        <u-input
          clearable
          :placeholder="$t('locales.pleaseEnterVerificationCode')"
          :maxlength="6"
          style="margin-right: 27rpx"
          class="input_block"
          v-model="form.password"
          type="number"
        />
        <SetCode
          :phone="form.username"
          uniqueKey="login"
          :request="{
            type: 'VERIFY_LOGIN',
            mobileAttribution: ''
          }"
          :disabled="$store.getters.accountRepeat"
        ></SetCode>
      </view>
    </view>
    <view class="footer_btn">
      <!-- <navigator v-if="current === 0" @click="registeclick">
        {{ $t('locales.registerNow') }}
      </navigator> -->
      <view v-if="current === 1">{{ $t('locales.newRegister') }}</view>
      <view v-else></view>
      <!-- <navigator url="/pages/user/register/index">
        {{ $t('locales.registerNow') }}
      </navigator> -->
      <view>
        <navigator
          v-if="current === 0"
          url="/pages/user/forgetPassword/index"
          style="color: #333"
        >
          {{ $t('locales.forgetPassword') }}
        </navigator>
      </view>
    </view>
    <view class="login_btn" @tap="submit">{{ $t('locales.signIn') }}</view>
    <Verify ref="verify" @result="verifyResult" />
    <u-picker
      v-model="showCountry"
      mode="selector"
      :range="placeList"
      range-key="country"
      @confirm="pickerConfirm"
    ></u-picker>
  </view>
</template>

<script>
import Verify from '@/components/verify'
import { Base64 } from '@/util/base64'
import SetCode from '@/components/setSmsCode'
import { sendCountryCurrencyList } from '@/api/http/user'
export default {
  components: {
    Verify,
    SetCode
  },
  props: {
    agreement: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: [
        {
          name: this.$t('locales.accountPasswordLogin')
        },
        {
          name: this.$t('locales.verificationCodeLogin')
        }
      ],
      current: 0,
      showCountry: false,
      form: {
        username: '',
        password: '',
        mobileAttribution: ''
      },
      mobileAtt: '',
      placeList: []
    }
  },
  created() {
    this.getpla()
  },
  methods: {
    registeclick() {
      this.current = 1
    },
    // 登录方式切换
    change(index) {
      for (let key in this.form) {
        if (key !== 'type' && key !== 'mobileAttribution') {
          this.form[key] = ''
        }
      }
      this.current = index
    },
    getpla() {
      sendCountryCurrencyList().then((res) => {
        console.log(res)
        this.mobileAtt = res.data[0].country
        this.form.mobileAttribution = res.data[0].id
      })
    },

    // 获取归属地
    getPlace() {
      sendCountryCurrencyList().then((res) => {
        if (res.code === 200) {
          this.placeList = res.data
          this.showCountry = true
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    pickerConfirm(row) {
      const data = this.placeList[row[0]]
      this.form.mobileAttribution = data.id
    },
    // 提交
    submit() {
      if (!this.agreement) {
        uni.showToast({
          icon: 'none',
          title: this.$t('locales.agreementCheck')
        })
        return
      }
      if (this.current === 0) {
        if (!this.form.username) {
          uni.showToast({
            icon: 'none',
            title: this.$t('locales.userNameNotEmpty')
          })
          return
        }
        if (!this.form.password) {
          uni.showToast({
            icon: 'none',
            title: this.$t('locales.PasswordnotEmpty')
          })
          return
        }
        this.loginApi()
      } else {
        if (!this.form.username) {
          uni.showToast({
            icon: 'none',
            title: this.$t('locales.pleaseEnterPhoneNumber')
          })
          return
        }
        if (!this.form.password) {
          uni.showToast({
            icon: 'none',
            title: this.$t('locales.pleaseEnterVerificationCode')
          })
          return
        }
        this.loginApi()
      }
    },
    // 滑动验证事件
    verifyResult() {
      if (this.current === 0) {
        this.loginApi()
      } else {
      }
    },
    // 调用登录api
    loginApi() {
      let formData = JSON.parse(JSON.stringify(this.form))
      formData.password = Base64.encode(this.form.password)
      this.$store.dispatch('Login', {
        ...formData,
        domainPrefix: this.$store.getters.domainPrefix || '',
        type: this.current === 0 ? 'user_password_realm' : 'user_phone_realm',
        businessType: 0,
        // #ifdef H5
        customerTerminal: '1',
        // #endif

        // #ifdef APP-PLUS
        customerTerminal: '2'
        // #endif
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user_form_login {
  width: 100%;
  background-color: #fff;
  .input_login_box {
    width: 626rpx;
    margin: auto;
    .input_login {
      display: flex;
      align-items: center;
      height: 88rpx;
      border-bottom: 1px solid #e1e6e6;
      padding: 0 20rpx;
      box-sizing: border-box;
      .input_icon {
        width: 42rpx;
        height: 42rpx;
      }
      .input_sex {
        padding: 0 10rpx;
        width: 140rpx;
      }
      .input_block {
        flex: 1;
        margin-left: 27rpx;
      }
    }
  }
  .footer_btn {
    width: 626rpx;
    margin: 0 auto 34rpx auto;
    display: flex;
    justify-content: space-between;
    height: 84rpx;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: $uni-font-size-sm;
    color: $theme-color;
  }
  .login_btn {
    background-color: $theme-color;
    width: 686rpx;
    height: 80rpx;
    color: #fff;
    border-radius: 40rpx;
    margin: auto;
    text-align: center;
    line-height: 80rpx;
  }
}
</style>
